<template>
  <div class="tab-pane" :class="{'active':tab=='build'}" id="build">
    <div class="not-build" v-if="!isError && !firstLoading && gameList.length==0 || !isLogin" :style="{height:styleObj.h+'px'}">
      <div class="niu"><img src="~assets/images/portfolio/meichuangjian.png" :style="{height:styleObj.hNiu+'px'}"></div>
      <div class="info">
        <span>我还没创建过比赛哦</span><br>
        <span>点击按钮可以创建一场比赛<br>可以邀请好友一起战斗<br>更可赢得金元宝!</span>
      </div>
      <div class="submit" @click.stop.prevent="buildGame"
           :style="{'padding': styleObj.pBtn + 'px 0', 'margin-top': styleObj.hMarTop+'px'}">
        创建比赛
      </div>
    </div>
    <gj-loadmore :bottom-method="loadBottom" :bottomPullText="bottomPullText" ref="loadmore"><!--:top-method="loadTop" -->
      <game-list :gameList="gameList"></game-list>
    </gj-loadmore>
    <div v-if="isLogin && isError" class="gamemy-error">{{describe}}</div>
    <div class="chuangsai-bank" v-if="gameList.length > 0"></div>
    <img class="chuangsai" v-if="gameList.length > 0" src="~assets/images/portfolio/chuangsai.png" @click.stop.prevent="buildGame"/>
  </div>
</template>

<script>
  import LocalDAO from 'common/localDAO'
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'
  import GameList from 'components/game/my/GameList'
  import LoadMore from 'components/LoadMore'

  export default{
    data(){
      return {
        firstLoading: true,
        isError: false,
        gameList: [],
        describe: '对不起，比赛信息获取失败',
        bottomPullText:"向上滑动更多比赛",
        pageNo: 1,
        pageSize:10,
        styleObj: {}
      }
    },
    props: {
      tab: {
        type: String
      },
      isLogin: {
        type: Boolean
      },
      userCode: {
        type: String
      }
    },
    components: {
      "game-list": GameList,
      'gj-loadmore': LoadMore
    },
    created: function () {
      if(!this.isLogin){
        this.setCss();
      }
    },
    methods: {
//      loadTop() {
//        this.pageNo = 1;
//        this.fetchData();
//      },
      loadBottom() {
        if(this.isLogin) {
          this.fetchData();
        }
      },
      fetchData(){
        var self = this;
        //获取我创建的比赛列表
        RemoteDAO.callHB002(self.userCode, "2", self.pageSize, self.pageNo, "0", function (response) {
          var gameList = [];
          if (response.error == 0) {
            self.isError = false;
            gameList = response.data.body;
            _.each(gameList, function (game, index) {
              game.FORMAT_BEGIN_DATE = CommonUtil.formatDatePoint(game.BEGIN_DATE);
              game.FORMAT_END_DATE = CommonUtil.formatDatePoint(game.END_DATE);
              game.timeClosing = '----'
            });
            if(gameList.length == 0 && self.firstLoading){
              self.firstLoading = false;
              self.setCss();
              self.$refs.loadmore.onBottomError();
            } else if (gameList.length < self.pageSize) {
              self.$refs.loadmore.onBottomAllLoaded();//全部数据加载完成
            } else {
              self.pageNo = self.pageNo + 1;
              self.$refs.loadmore.onBottomLoaded(); //单次加载成功
            }
          } else {
            gameList = [];
            self.isError = true;
            self.describe = response.data;
            self.$refs.loadmore.onBottomError();
          }
          //拼接之前加载的比赛并存储
          self.gameList = self.gameList.concat(gameList);
          LocalDAO.setGameBuild({"gameList": self.gameList});
        });
      },
      setCss(){
        var h = document.body.offsetHeight - 107;
        var hNiu = h * 0.4;
        var hBtn = h * 0.08;
        var pBtn = (h * 0.08-24)/2;
        var hInfo = 125;
        var hMarTop = (h - (hNiu + 23 * 2 + hInfo + hBtn)) / 2;//23*2是牛图的上下padding
        this.styleObj = {
          h: h,
          hNiu: hNiu,
          pBtn: pBtn,
          hInfo: hInfo,
          hMarTop: hMarTop
        };
      },
      buildGame(){
        var self = this;
        var kv = {"usercode": self.userCode};
        TDAPP.onEvent("8002", "", kv);
        TDAPP.send();

        if (self.isLogin) {//有登录
          self.$router.push({path: '/game/buildgame'})
        } else {
          var kv = {"usercode": ""};
          TDAPP.onEvent("2013", "", kv);
          TDAPP.send();
          //注册或登录
          RemoteDAO.callNativeLogin(function (response) {
            if (response.error == 0) {
              self.$router.push({path: '/game/buildgame'})
            } else {
              self.$store.dispatch('setTip', {text: response.data})
            }
          });
        }
      }
    }
  }
</script>

<style scoped>

</style>
